<template>
  <v-card class="mx-auto" height="320px">
    <v-img class="card-image" src="@/assets/R.jpg" contain height="100%">
      <v-card-text>
        <div>胡图图书馆管理系统</div>
        <p class="text-h4 text--primary">
          读者借阅证
        </p>
        <p>Hututu Lib System</p>
        <div class="text--primary">
          读者：{{ this.name }}<br>
          电话号码：{{ this.phonenum }}<br>
          <template v-if="this.licenceid">
          借阅证号：{{ this.licenceid }}<br>
          有效期：{{ this.timeout }}<br>
          </template>
          <template v-else>
            借阅证：未办理<br>
          </template>
        </div>
      </v-card-text>
      <v-card-actions>
        <v-btn text color="teal accent-4" @click="reveal = true">
          更多信息
        </v-btn>
        <v-btn text color="teal accent-4" @click="newLicence()">
          办理
        </v-btn>
        <div width="10px"></div>
        <borrowcard_info></borrowcard_info>
      </v-card-actions>
      <v-expand-transition>
        <v-card v-if="reveal" class="transition-fast-in-fast-out v-card--reveal" style="height: 100%;">
          <v-card-text class="pb-0">
            <p class="text-h4 text--primary">
              详细信息
            </p>
            <p>
              尊敬的读者：<br>

              感谢您选择胡图图书馆管理系统成为您的借阅证。这是一个方便、高效的借书流程，让您在忙碌的生活中轻松地获取知识和娱乐。

              在使用借阅证借书时，请注意以下事项：<br>

              借阅证的有效期为一年，到期后需重新办理。请及时续借或归还图书，避免逾期罚款。<br>

              每位读者最多可借阅5本图书，借阅期限为30天。如需延期，请在到期前办理续借手续。<br>

              借阅图书时，请认真检查图书的数量和品质，如有问题，请及时向图书馆工作人员反映。<br>

              如遗失或损坏借阅证，请及时向图书馆报告并补办新证。<br>

              胡图图书馆管理系统将为您提供优质的服务，让您在阅读的世界里畅游。祝您借阅愉快！ </p>
          </v-card-text>
          <v-card-actions class="pt-0">
            <v-btn text color="teal accent-4" @click="reveal = false">
              Close
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-expand-transition>
    </v-img>
  </v-card>
</template>
  
<script>
import axios from "axios";
import qs from "qs";
import borrowcard_info from "../components/borrowcard_info/borrowcard_info.vue";
export default {
  name: "LibraryCard",
  components: {
    borrowcard_info,
  },
  mounted() {
    this.name = sessionStorage.getItem("name");
    this.licenceid = sessionStorage.getItem("licenceid");
    console.log(this.id);
    this.timeout = sessionStorage.getItem("timeout");
  },
  methods:{
    newLicence(){
      axios({
        method: "post",
        url: this.$root.businessServer + "licenceInfo/newlicence",
        data: qs.stringify({
          user_phonenum: this.phonenum,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((res) => {
          if(res.data.message == "success")
            this.$message.success("办理成功");
          else if(res.data.message == "noneed")
            this.$message.success("您已经办理过一张借阅证，无需再办理");
        })
        .catch((error) => {
          // 提示删除失败
          this.$message.error("办理失败");
        });
    }
  },
  data: () => ({
    reveal: false,
    name: null,
    phonenum: sessionStorage.getItem("phone"),
    licenceid: null,
    timeout: null,
  }),
};
</script>
  
  <style>
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}
</style>